﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PHOTOSHOWROOM</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="Dayz Hidayat">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
    html {
        overflow: hidden;
    }
    body {
        margin: 0px;
        padding: 0px;
        background: #000;
        width: 100%;
        height: 100%;
    }
    #screen {
        position: absolute;
        top: 1%;
        left: 1%;
        width: 98%;
        height: 98%;
        background: #000;
        color: #fff;
    }
    #screen div {
        position: absolute;
        overflow: hidden;
        cursor: pointer;
    }
    #screen img {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    #screen .label {
        position: absolute;
        color: #FFF;
        background: #000;
        font-family: arial;
        white-space: no-wrap;
    }
</style>

<!-- utilities -->
<script type="text/javascript" src="http://lorddayz.googlecode.com/files/minilib.js"></script>

<script type="text/javascript">
// ========================================================
//            ====== Javascript Slideshow ======
// script written by Gerard Ferrandez - December 31, 2006
// ========================================================

var diap = {
    /////////////////////////////////
    BR : 3,     // border size in px
    ZR : .75,   // zoom ratio
    SP : .08,    // speed
    /////////////////////////////////
    V : false,
    S : false,
    G : true,
    
    resize : function () {
        /* ==== window resize event ==== */
        diap.nw = diap.scr.offsetWidth;
        diap.nh = diap.scr.offsetHeight;
        diap.nwu = (diap.nw * diap.ZR);
        diap.nhu = (diap.nh * diap.ZR);
        diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR;
        diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR;
        diap.rc  = 255 / ((diap.nw / diap.NX) - diap.nwt);
        if (diap.N) {
            diap.setPosition();
            if (!diap.G) diap.delLabels();
        }
    },
    
    setPosition : function () {
        /* ==== calculate image target position  ==== */
        var k = 0;
        var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0;
        for (var j = 0; j < this.NY; j++) {
            var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0;
            for (var i = 0; i < this.NX; i++) {
                var o = this.spa[k++];
                o.y1 = y;
                o.x1 = x;
                o.w1 = this.S ? (o == this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR;
                o.h1 = this.S ? (o == this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR;
                x += this.S ? ((this.X == i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX);
            }
            y += this.S ? ((this.Y == j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY);
        }
    },
    
    delLabels : function () {
        /* ==== remove texts ==== */
        for ( var i = 0; i < diap.N; i++) {
            var o = diap.spa[i];
            if (o.T) diap.scr.removeChild(o.T);
            o.T = false;
        }
    },
    
    run : function () {
        /* ==== main loop ==== */
        for ( var i = 0; i < diap.N; i++) diap.spa[i].move();
        setTimeout(diap.run, 16);
    },
    
    init : function (container, NX, NY, path, images) {
        /* ==== initialize script ==== */
        this.scr = id(container);
        if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; }
        this.NX = NX;
        this.NY = NY;
        this.spa = {};
        this.resize();
        var k = 0;
        for (var y = 0; y < this.NY; y++) {
            for (var x = 0; x < this.NX; x++) {
                /* ==== create HTML elements ==== */
                var s = this.spa[k] = document.createElement('div');
                s.img = document.createElement('img');
                
                /* ==== opacity optimized function ==== */
                s.img.setOpacity = function (alpha) {
                    if (alpha < 0) alpha = 0; else if (alpha > 100) alpha = 100;
                    if (alpha == 100) {
                        /* ==== speed opt - remove IE filter ==== */
                        this.style.visibility = 'visible';
                        this.style.filter = '';
                        this.style.opacity = 1;
                        return 100;
                    } else if (alpha == 0) {
                        /* ==== hide image, remove opacity ==== */
                        this.style.visibility = 'hidden';
                        this.style.filter = '';
                        this.style.opacity = 0;
                        return 0;
                    }
                    if (this.filters) {
                        /* ==== IE filter ==== */
                        if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')';
                        else this.filters.alpha.opacity = alpha;
                    /* ==== CSS opacity ==== */
                    } else this.style.opacity = alpha * .01;
                    return alpha;
                }
                s.img.src = id('loading').src;
                s.appendChild(s.img);
                this.scr.appendChild(s);
                
                /* ==== pre-load image ==== */
                s.pre = new Image();
                s.pre.obj = s;
                s.pre.onload = function() { this.obj.img.src = this.src; }
                s.pre.src = path + images[k][0];
                
                /* ==== set image variables ==== */
                s.x  = x;
                s.y  = y;
                s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2;
                s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;;
                s.x1 = x * (this.nw / this.NX);
                s.y1 = y * (this.nh / this.NY);
                s.w0 = 0;
                s.h0 = 0;
                s.w1 = 0;
                s.h1 = 0;
                s.V  = 0;
                s.t  = images[k][1];
                s.T  = false;
                
                /* ==== function move image ==== */
                s.move = function() {
                    /* ==== position images ==== */
                    this.style.left   = px(this.x0 += (this.x1 - this.x0) * diap.SP);
                    this.style.top    = px(this.y0 += (this.y1 - this.y0) * diap.SP);
                    this.style.width  = px(this.w0 += (this.w1 - this.w0) * diap.SP);
                    this.style.height = px(this.h0 += (this.h1 - this.h0) * diap.SP);
                    if (this != diap.S) {
                        /* ==== set image background color ==== */
                        if (Math.abs(this.w1 - this.w0) > 1) {
                            var c = (!diap.G && this.V > 0) ? 255 : 16 + Math.round(255 - diap.rc * (this.w0 - diap.nwt));
                            this.style.background = 'RGB('.concat(c, ',', c, ',', c, ')');
                        }
                        if (this == diap.V) {
                            /* ==== on mouseover: fade in ==== */
                            if (this.V < 100) this.img.setOpacity(this.V += 5);
                        } else {
                            /* ==== fade out ==== */
                            if (this.V >= 0 && diap.G != this) this.img.setOpacity(this.V -= 2);
                        }
                    }
                    /* ==== text effect ==== */
                    if (this.T) this.dispLabel();
                }
                
                /* ==== display text function (typewriter FX) ==== */
                s.dispLabel = function() {
                    if (diap.G || diap.S == this) {
                        /* ==== zoomed image ==== */
                        this.T.style.left  = px(this.x0);
                        this.T.style.top   = px(this.y0);
                        this.T.style.width = px(this.w0);
                    } else {
                        /* ==== calculate text position ==== */
                        var xt = diap.S.x0 + this.w0 + diap.BR;
                        if (this.y == diap.Y) {
                            this.T.style.top = px(this.y0 - this.f - diap.BR);    
                            if (this.y == 0) var xt = diap.S.x0;
                        } else this.T.style.top = px(this.y0 - (this.y <= diap.Y ? diap.BR : 0));
                        if (this.x > diap.X) this.T.style.left = px(diap.S.w0 + diap.S.x0 - diap.nwu * .5);
                        else this.T.style.left = px(xt);
                        if (this != diap.V) {
                            /* ==== text type out ==== */
                            this.Tp--;
                            this.T.innerHTML = this.t.substring(0, this.Tp);
                            if (this.Tp < 1) {
                                diap.scr.removeChild(this.T);
                                this.T = false;
                            }
                        } else {
                            if (this.Tp < this.t.length) {
                                /* ==== text type in ==== */
                                this.Tp++;
                                this.T.innerHTML = this.t.substring(0, this.Tp);
                            }
                        }
                    }
                }
                
                /* ==== create text function ==== */
                s.createLabel = function () {
                    this.T = document.createElement('div');
                    this.T.className = 'label';
                    if (!diap.G && this.x > diap.X) this.T.style.textAlign = 'right';
                    this.f = 4 + Math.round(Math.sqrt(diap.nht * 2));
                    if(this == diap.S) {
                        this.f *= 2;
                        this.T.style.background = 'none';
                        this.T.style.textAlign = 'center';
                    }
                    this.T.style.fontSize = ''.concat(this.f, 'px');
                    this.T.innerHTML   = this.t;
                    this.T.style.left = px(-1000);
                    this.T.style.width = px(diap.nwu * .5);
                    this.T.style.height = px(this.f + 3);
                    this.Tp = 0;
                    diap.scr.appendChild(this.T);
                }
                
                /* ==== on mouse over event ==== */
                s.onmouseover = function() {
                    if (diap.S != this && diap.G != this) {
                        /* ==== display image ==== */
                        this.img.setOpacity(100);
                        this.V = this.img.setOpacity(20);
                    }
                    /* ==== create text ==== */
                    if (!this.T) this.createLabel();
                    diap.V = this;
                }
                
                /* ==== on click event ==== */
                s.onclick = function() {
                    /* ==== memorize selected image ==== */
                    diap.X = this.x;
                    diap.Y = this.y;
                    diap.V = false;
                    diap.G = false;
                    this.V = this.img.setOpacity(100);
                    diap.delLabels();
                    if (diap.S == this) {
                        /* ==== zoom out - grid mode on ==== */
                        diap.S = false;
                        diap.G = this;
                        for (var i = 0; i < diap.N; i++) diap.spa[i].createLabel();
                    } else {
                        /* ==== zoom in ==== */
                        diap.S = this;
                        this.createLabel();
                    }
                    diap.setPosition();
                }
                s.createLabel();
                s.ondblclick = s.onclick;
                s.ondrag = function () { return false; }
                k++;
            }
        }
        this.N = NX * NY;
        /* ==== add resize event ==== */
        this.resize();
        addEvent(window, 'resize', diap.resize);
        /* ==== start main loop ==== */
        this.run();
    }
}

/* ==== create diaporama ==== */
onload = function () {
    /* ==== container, X, T, path, [image.src, text] ==== */
    diap.init("screen", 4, 4, "", [
        ["http://1.bp.blogspot.com/-nbfeaBtnMBU/TsZsvX2DW5I/AAAAAAAAAhE/exf0zEEolsU/s1600/or8.jpg", "His little voodoo was a success"],
        ["http://1.bp.blogspot.com/-UkSmyhMdTJM/TsZsqG70FUI/AAAAAAAAAgc/pJSKeD-cE88/s1600/or46.jpg", "She arrived from nowhere"],
        ["http://4.bp.blogspot.com/-e6WvJb0qIek/TsZsx2JEuXI/AAAAAAAAAhU/WfErCaVqerA/s1600/or10.jpg", "as cute as she could be"],
        ["http://1.bp.blogspot.com/-ns-Hsewomx0/TsZstdbYlqI/AAAAAAAAAg0/vCNuzppNx68/s1600/or4.jpg", "It was a night of full moon"],
        ["http://1.bp.blogspot.com/-bQN7_Dxg-lw/TsZs16uU1RI/AAAAAAAAAh0/M5DP02Xx-1w/s1600/or16.jpg", "It didn't take him anytime to fall in love"],
        ["http://4.bp.blogspot.com/-bjmswfQArAY/TsZswygsgBI/AAAAAAAAAhM/J-3WvCS6YRA/s1600/or9.jpg", "He had been certain of his success"],
        ["http://1.bp.blogspot.com/-3FW2sVbi1RQ/TsZsummpyAI/AAAAAAAAAg8/UM8diJiqKf8/s1600/or6.jpg", "In a few days after"],
        ["http://4.bp.blogspot.com/-0dxWIiKN69E/TsZs3J8q3vI/AAAAAAAAAh8/5gvOF8XnmSc/s1600/or27.jpg", "All the tools were in place"],
        ["http://4.bp.blogspot.com/--7JkfmRKdas/TsZs04TBtRI/AAAAAAAAAhs/kj7GNQIapM8/s1600/or14.jpg", "The girl left a note..."],
        ["http://3.bp.blogspot.com/-YbLLOjvN0Lg/TsZs4VTYjgI/AAAAAAAAAiE/gbUdVQyV0Ec/s1600/or30.jpg", "...saying she had left home"],
        ["http://3.bp.blogspot.com/-Ka-u1hJlOpE/TsZsrSafEBI/AAAAAAAAAgk/cfFu_Fid3g8/s1600/or1.jpg", "''So what's with the panic?''"],
        ["http://3.bp.blogspot.com/-SEIzxwfPWVw/TsZssqxoutI/AAAAAAAAAgs/tziGHdLzp6s/s1600/or2.jpg", "Tears for fears"],
        ["http://3.bp.blogspot.com/-JqNZoQKaQ5c/TsZszh3SxaI/AAAAAAAAAhk/N11udsn_NfQ/s1600/or12.jpg", "A light in the dark"],
        ["http://4.bp.blogspot.com/-OH0tKx8x_RA/TsZs7z_yi7I/AAAAAAAAAic/6Ae32x6WTUw/s1600/or44.jpg", "Flashes of pain and hope"],
        ["http://1.bp.blogspot.com/-_rQ8IYfGUZ8/TsZs7EvclqI/AAAAAAAAAiU/BLVHF1h9xjs/s1600/or39.jpg", "If only we could capture..."],
        ["http://1.bp.blogspot.com/-YOhycBiXcJY/TsZs5lma06I/AAAAAAAAAiM/SxTyLMZngI0/s1600/or33.jpg", "...the beauty of autumn"]
    ]);
}
</script>

</head>

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

<div id="screen"></div>
<img id="loading" alt="" src="http://4.bp.blogspot.com/-Ntad7D1UnGo/TsZsy9QRFoI/AAAAAAAAAhc/aDQbXspCWMg/s1600/or11.jpg" style="visibility: hidden">
<object data="http://flash-mp3-player.net/medias/player_mp3.swf" width="0" height="0" type="application/x-shockwave-flash">
<param value="#ffffff" name="bgcolor" /><br />
<param value="mp3=http://dc338.4shared.com/img/961885111/9c7d4606/dlink__2Fdownload_2F9M3w_5FzGr_3Ftsid_3D20111117-160410-726101ae/preview.mp3&amp;loop=1&amp;autoplay=1&amp;volume=125" name="FlashVars" />
</object>
</body>
</html>